<template>
  <view class="device-fitting">
    <view class="data-content">
      <scroll-view scroll-y v-if="initFinish">
        <view class="empty" v-if="isEmpty">
          <text>暂无数据</text>
        </view>
        <uni-swipe-action v-if="!isEmpty">
          <uni-swipe-action-item v-for="(data, index) in dataList" :key="index" :disabled="!editAble">
            <view class="list-item">
              <view class="top">
                <text class="name" v-text="data.partsName" />
                <text class="num">× {{ data.workpartsNum }}</text>
              </view>
              <view class="fitting-model">
                <text v-text="data.partsModel" />
              </view>
            </view>
            <template slot="right">
              <view class="del-content" @click="del(data)">
                <text>删除</text>
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </scroll-view>
    </view>
    <view class="btn-content" v-if="editAble">
      <button class="login-btn cu-btn block bg-blue lg" @click="addNew">添加配件</button>
    </view>
    <FittingAdd v-if="addShow" :work-id="workId" :order-type="orderType" @add-success="addSuccess" @close="addShow = false" />
  </view>
</template>

<script>
  import { getDeviceFitting, delFitting } from '../../api/device/fitting';
  import FittingAdd from '../../components/device/FittingAdd';
  import {
    showConfirm,
  } from '@/utils/common';
  
  export default {
    name: 'DeviceFitting',
    components: {
      FittingAdd,
    },
    props: {},
    data() {
      return {
        workId: '',
        workStatus: '',
        orderType: '',
        editAble: false,
        isEmpty: false,
        dataList: [],
        initFinish: false,
        addShow: false,
        userInfo: this.$store.state.user,
      };
    },
    mounted() {
    },
    created() {
    },
    methods: {
      async getData() {
        const { workId } = this;
        const param = {
          workId,
        };
        const res = await getDeviceFitting(param, this.orderType);
        if (res.code === 200) {
          this.dataList = res.data || [];
        }
        this.isEmpty = this.dataList.length < 1;
        this.initFinish = true;
      },
      addNew() {
        this.addShow = true;
      },
      addSuccess() {
        this.getData();
      },
      async del(data) {
        console.log(data);
        const confirm = await showConfirm('是否删除该配件？').catch(() => {
        });
        if (confirm.confirm) {
          const param = {
            workPartsIds: data.workpartsId,
          };
          const res = await delFitting(param, this.orderType);
          if (res.code === 200) {
            this.getData();
          }
        }
      },
    },
    onShow() {
      const pageList = getCurrentPages();
      const param = pageList[ pageList.length - 1 ].options || {};
      this.workId = param.workId;
      this.workStatus = param.workStatus;
      this.orderType = param.orderType;
      this.editAble = !!param.editAble;
      this.getData();
    },
  };
</script>

<style lang="scss" scoped>
  .device-fitting {
    &, * {
      box-sizing: border-box;
    }
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    .data-content {
      flex: 1;
      overflow: hidden;
      
      uni-scroll-view {
        height: 100%;
        
        .empty {
          text-align: center;
          color: #cccccc;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .list-item {
          padding: 20px;
          border-bottom: 1px solid #a0dcea;
          .top {
            display: flex;
            line-height: 1.5;
            width: 100%;
            .name {
              flex: 1;
              font-size: 14px;
            }
            .num {
              font-size: 14px;
              white-space: nowrap;
            }
          }
          .fitting-model {
            margin-top: 10px;
            color: #cccccc;
          }
        }
        .button-group--right {
          .del-content {
            height: 100%;
            display: flex;
            align-items: center;
            background-color: red;
            color: white;
            font-size: 16px;
            padding: 0 15px;
          }
        }
        
        /deep/ .uni-scroll-view-refresher {
          background-color: #f1f1f1 !important;
        }
        
        /deep/ .uni-swipe {
          border-bottom: 1px solid #f1f1f1;
        }
      }
    }
    .btn-content {
      padding: 10px;
    }
  }
  
  page {
    background-color: white;
  }
  
  uni-page-body {
    height: 100%;
  }
</style>
